import {useLoaderData, Link} from 'react-router-dom';
import ArticleEditButton from "@/pages/article/components/article_EditButton.jsx";
import {marked} from "marked";
import Comment from "@/pages/comment/index.jsx";


export default function ArticleDetail() {
    const article = useLoaderData();
    const {slug, title, description, body, tags, author, createdAt} = article;
    if (!body) return null;
    const markdata = body;
    const markhtml = marked.parse(markdata);
    const markobj = {__html: markhtml};
    return (
        <div className="article-page">
            {/*    文章头信息*/}
            <div className='banner'>
                <div className='container'>
                    {/*标题*/}
                    <h1>{title}</h1>
                    <div className="article-meta">
                        {/*    作者信息*/}
                        <div className="info">
                            <Link to={`/profile/${author && author.username}`}>
                                <img
                                    src={author && author.avatar || "https://img2.baidu.com/it/u=1210416302,3260530728&fm=253&fmt=auto&app=138&f=GIF?w=192&h=178"}
                                    alt={author && author.username}/>
                            </Link>
                        </div>
                        <div className="info">
                            <Link to={`/profile/${author && author.username}`}>
                                {author && author.username}
                            </Link>
                            {" "}
                            <span>
                                {
                                    new Date(createdAt).toLocaleDateString()
                                }
                            </span>
                        </div>
                    </div>
                    {/*    用户行为*/}
                    <ArticleEditButton article={article}/>
                </div>
            </div>
            {/*    文章信息*/}
            <div className="row article-content">
                <div className='col-md-8 offset-md-2 col-xs-12'>
                    {/*    文章内容*/}
                    <div dangerouslySetInnerHTML={markobj}></div>
                    {/*    文章标签*/}
                    <ul className="tag-list">
                        {
                            tags.map((tag) => {
                                return (
                                    <li className="tag-default tag-pill" key={tag}>
                                        {tag}
                                    </li>
                                )
                            })
                        }
                    </ul>
                </div>
            </div>
            {/*    文章评论*/}
            <Comment slug={slug}/>
        </div>
    )
}